<template>
  <div class="login">
    <h2>我的云盘</h2>
    <div class="from">
      <div class="top">
        <span :class="activename == '登录' ? 'active' : ''" @click="tologin()"
          >登录</span
        >
        <span
          :class="activename == '注册' ? 'active' : ''"
          @click="toregister()"
          >注册</span
        >
      </div>
      <div class="content">
        <el-form
          :rules="rules"
          ref="ruleForm"
          :model="form"
          label-width="80px"
          size="medium"
          label-position="left"
        >
          <el-form-item
            :label="activename == '登录' ? '邮箱：' : '邮箱：'"
            prop="email"
            :error="errmsg"
            :key="activename"
          >
            <el-input v-model="form.email"></el-input>
          </el-form-item>

          <el-form-item
            v-if="activename == '注册'"
            label="验证码："
            prop="code"
            :error="codeerr"
          >
            <el-input v-model="form.code">
              <template slot="append">
                <el-button
                  v-if="getcodeStaus"
                  @click="getcode"
                  class="getcode"
                  type="text"
                  size="mini"
                  :loading="codeload"
                  >获取验证码</el-button
                >
                <el-button v-else class="getcode" type="text" disabled="true"
                  >{{ outtime }}秒后重新获取</el-button
                >
              </template>
            </el-input>
          </el-form-item>

          <el-form-item v-if="activename == '注册'" label="昵称：" prop="name">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="密码：" prop="password" :pderr="errmsg">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>

          <el-form-item size="large">
            <el-button
              :loading="isload"
              type="primary"
              @click="submitForm('ruleForm')"
              @keyup.enter="submitForm('ruleForm')"
              >{{ activename == "登录" ? "登录" : "注册" }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="footer" v-if="activename == '登录'">
        <!-- <div class="other">
          <span>其他登录方式：</span>
          <img src="../assets/QQ.png" width="30px" height="30px" />
        </div> -->
        <!-- <span href="">忘记密码</span> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      activename: "登录",
      getcodeStaus: true,
      codeload: false,
      isload: false,
      outtime: 60,
      form: { name: "", email: "", password: "", code: "" },
      errmsg: "",
      pderr: "",
      codeerr: "",
      rules: {
        email: [
          { required: true, message: "请输入账号", trigger: "blur" },
          // {
          //   type: "email",
          //   message: "请输入正确的邮箱地址",
          //   trigger: ["blur", "change"],
          // },
        ],
        name: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    ...mapMutations( ["login"]),
    tologin() {
      this.errmsg = "";
      this.pderr = "";
      this.form.name = "";
      this.form.email = "";
      this.form.password = "";
      this.activename = "登录";
    },
    toregister() {
      this.errmsg = "";
      this.pderr = "";
      this.form.name = "";
      this.form.email = "";
      this.form.password = "";
      this.activename = "注册";
    },
    getcode() {
      if (this.form.email && this.form.email.indexOf("@") != -1) {
        this.codeload = true;
        this.$https
          .get("/user/getemailcode", { params: { email: this.form.email } })
          .then((res) => {
            if (res.code == 403) {
              this.errmsg = res.msg;
            } else if (res.code == 200) {
              this.codeload = false;
              this.getcodeStaus = false;
              var auth_timer = setInterval(() => {
                this.outtime--;
                if (this.outtime <= 0) {
                  this.getcodeStaus = true;
                  this.outtime = 60;
                  clearInterval(auth_timer);
                }
              }, 1000);
            }
          });
      } else {
        this.errmsg = "请输入正确的邮箱！";
      }
    },
    keyDown(e) {
      if (e.keyCode === 13) {
        this.submitForm();
      }
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.isload = true;
          if (this.activename == "登录") {
            this.$https
              .post("/user/login", {
                email: this.form.email,
                password: this.form.password,
              })
              .then((res) => {
                this.isload = false;
                if (res.code == 200) {
                  this.$store.commit('login',res.data)
                  this.$router.push("/");
                } else {
                  this.$message.error(res.msg);
                }
              });
          } else {
            this.isload = true;
            this.$https
              .post("/user/register", {
                name: this.form.name,
                password: this.form.password,
                email: this.form.email,
                code: this.form.code,
              })
              .then((res) => {
                this.isload = false;
                if (res.code == 402) {
                  this.codeerr = res.msg;
                } else if (res.code == 405) {
                  this.errmsg = res.msg;
                } else if (res.code == 200) {
                  this.login(res);
                  this.$router.push("/");
                }
              });
          }
        } else {
          return false;
        }
      });
    },
  },
  mounted() {
    // 绑定监听事件
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    // 销毁事件
    window.removeEventListener("keydown", this.keyDown, false);
  },
};
</script>
<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-color: #f7fcfe;
  background-image: url(../assets/login.svg);
  background-repeat: no-repeat;
  background-position: 45% 30%;
  position: relative;
  h2 {
    padding-top: 15vh;
  }
  .from {
    position: absolute;
    right: 300px;
    background-color: #fff;
    box-shadow: 0 0 5px rgb(202, 202, 202);
    width: 15vw;
    border-radius: 10px;
    padding: 0 20px;
    .top {
      display: flex;
      justify-content: center;
      text-align: center;
      padding-bottom: 10px;
      span {
        border-top: 3px solid #fff;
        padding: 15px;
        width: 40%;
        color: #555555;
        cursor: pointer;
        &:nth-child(1) {
          margin-right: 11px;
          position: relative;
        }
        &:nth-child(1)::after {
          content: "";
          position: absolute;
          right: -6px;
          width: 1px;
          height: 20px;
          background-color: rgb(209, 209, 209);
        }
      }
      .active {
        border-top-color: #2777f8;
        color: #2777f8;
        font-weight: bold;
      }
    }
    .content {
    }
    .footer {
      font-size: 12px;
      padding-bottom: 20px;
      color: rgb(155, 155, 155);
      .other {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
      }
    }
  }
}
</style>
